import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:rongcloud_im_wrapper_plugin/rongcloud_im_wrapper_plugin.dart';
import 'package:url_launcher/url_launcher.dart';

import '../models/bt_chat_model.dart';
import '../models/bt_message.dart';

class BtChatMessageImageWidget extends StatelessWidget {
  const BtChatMessageImageWidget({Key? key, required this.item, required this.model}) : super(key: key);

  final BtMessage item;
  final BtChatModel model;

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Visibility(
        visible: item.isSender,
        child: Container(
          padding: const EdgeInsets.only(top: 16, right: 18, bottom: 16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Row(
                children: [
                  Visibility(
                    visible: item.status == 2,
                    child: InkWell(
                      child: Image.asset(
                        'assets/images/bt_icon_chat_sync.png',
                        width: 16,
                        height: 16,
                      ),
                      onTap: () {
                        //widget.model.sendTextMessage((p0) => null);
                      },
                    ),
                  ),
                  Visibility(
                    visible: item.status == 0,
                    child: const SizedBox(
                      width: 16,
                      height: 16,
                      child: CircularProgressIndicator(
                        strokeWidth: 1.0,
                        color: Color(0xFF4DB4FF),
                      ),
                    ),
                  ),
                  const SizedBox(width: 8),
                  InkWell(
                    onTap: () {
                      launchUrl(
                          Uri.parse(
                            (item.message as RCIMIWImageMessage).remote ?? '',
                          ),
                          mode: LaunchMode.inAppWebView);
                    },
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(12),
                      child: CachedNetworkImage(
                        imageUrl: (item.message as RCIMIWImageMessage).remote ?? '',
                        width: 158,
                        height: 188,
                        fit: BoxFit.cover,
                        placeholder: (context, url) => Container(
                          width: 158,
                          height: 188,
                          decoration: BoxDecoration(
                              color: const Color(0xFFF6F7F8), borderRadius: BorderRadius.circular(12)),
                        ),
                        errorWidget: (context, url, error) => Container(
                          width: 158,
                          height: 188,
                          decoration: BoxDecoration(
                              color: const Color(0xFFF6F7F8), borderRadius: BorderRadius.circular(12)),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              const SizedBox(width: 10),
              ClipRRect(
                borderRadius: BorderRadius.circular(22),
                child: CachedNetworkImage(
                  width: 44,
                  height: 44,
                  fit: BoxFit.fill,
                  imageUrl: model.userAvatar,
                  placeholder: (context, url) => Container(
                    width: 44,
                    height: 44,
                    decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(22)),
                  ),
                  errorWidget: (context, url, error) => Container(
                    width: 44,
                    height: 44,
                    decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(22)),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      Visibility(
        visible: !item.isSender,
        child: Container(
          padding: const EdgeInsets.only(left: 18, top: 16, bottom: 16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(22),
                child: CachedNetworkImage(
                  width: 44,
                  height: 44,
                  fit: BoxFit.fill,
                  imageUrl: model.targetAvatar,
                  placeholder: (context, url) => Container(
                    width: 44,
                    height: 44,
                    decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(22)),
                  ),
                  errorWidget: (context, url, error) => Container(
                    width: 44,
                    height: 44,
                    decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(22)),
                  ),
                ),
              ),
              const SizedBox(width: 10),
              InkWell(
                onTap: () {
                  launchUrl(
                      Uri.parse(
                        (item.message as RCIMIWImageMessage).remote ?? '',
                      ),
                      mode: LaunchMode.inAppWebView);
                },
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(12),
                  child: CachedNetworkImage(
                    imageUrl: (item.message as RCIMIWImageMessage).remote ?? '',
                    width: 158,
                    height: 188,
                    fit: BoxFit.cover,
                    placeholder: (context, url) => Container(
                      width: 158,
                      height: 188,
                      decoration: BoxDecoration(
                          color: const Color(0xFFF6F7F8), borderRadius: BorderRadius.circular(12)),
                    ),
                    errorWidget: (context, url, error) => Container(
                      width: 158,
                      height: 188,
                      decoration: BoxDecoration(
                          color: const Color(0xFFF6F7F8), borderRadius: BorderRadius.circular(12)),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    ]);
  }
}
